
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue CDN Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Waiting for message...'
            },
            mounted() {
                this.fetchMessage();
            },
            methods: {
                fetchMessage() {
                    // 发送GET请求到Flask后端
                    // axios.get('http://localhost:5001/message')
                    axios.get('/message')
                        .then(response => {
                            // 更新message数据属性
                            this.message = response.data.message;
                        })
                        .catch(error => {
                            console.error("There was an error fetching the message:", error);
                            this.message = 'Failed to fetch message.';
                        });
                }
            }
        });
    </script>
</body>
</html>
